<template lang="html">
  <div class="cron" :val="value_">
    <el-tabs v-model="activeName">
      <el-tab-pane label="秒" name="s">
        <second-and-minute v-model="sVal" lable="秒"></second-and-minute >
      </el-tab-pane>
      <el-tab-pane label="分" name="m">
        <second-and-minute v-model="mVal" lable="分"></second-and-minute >
      </el-tab-pane>
      <el-tab-pane label="时" name="h">
        <hour v-model="hVal" lable="时"></hour>
      </el-tab-pane>
      <el-tab-pane label="日" name="d">
        <day v-model="dVal" lable="日"></day>
      </el-tab-pane>
      <el-tab-pane label="月" name="month">
        <month v-model="monthVal" lable="月"></month>
      </el-tab-pane>
      <el-tab-pane label="周" name="week">
        <week v-model="weekVal" lable="周"></week>
      </el-tab-pane>
      <el-tab-pane label="年" name="year">
        <year v-model="yearVal" lable="年"></year>
      </el-tab-pane>
    </el-tabs>
    <!-- table -->
    <el-table
       :data="tableData"
       size="mini"
       border
       style="width: 100%;">
       <el-table-column
         prop="sVal"
         label="秒"
         width="70">
       </el-table-column>
       <el-table-column
         prop="mVal"
         label="分"
         width="70">
       </el-table-column>
       <el-table-column
         prop="hVal"
         label="时"
         width="70">
       </el-table-column>
       <el-table-column
         prop="dVal"
         label="日"
         width="70">
       </el-table-column>
       <el-table-column
         prop="monthVal"
         label="月"
         width="70">
       </el-table-column>
       <el-table-column
         prop="weekVal"
         label="周"
         width="70">
       </el-table-column>
       <el-table-column
         prop="yearVal"
         label="年">
       </el-table-column>
     </el-table>
  </div>
</template>

<script>
import SecondAndMinute from './sub/secondAndMinute'
import hour from './sub/hour'
import day from './sub/day'
import month from './sub/month'
import week from './sub/week'
import year from './sub/year'
export default {
  props: {
    cronExpression: {
      type: String
    },
    cronZn: {
      type: String
    },
  },
  data () {
    return {
      activeName: 's',
      sVal: '',
      mVal: '',
      hVal: '',
      dVal: '',
      monthVal: '',
      weekVal: '',
      yearVal: '',
    }
  },
  watch: {
    'cronExpression' () {
      this.updateVal()
    }
  },
  computed: {
    tableData () {
      return [{
        sVal: this.sVal,
        mVal: this.mVal,
        hVal: this.hVal,
        dVal: this.dVal,
        monthVal: this.monthVal,
        weekVal: this.weekVal,
        yearVal: this.yearVal
      }]
    },
    value_ () {
      if (!this.dVal && !this.weekVal) {
        return ''
      }
      if (this.dVal === '?' && this.weekVal === '?') {
        this.$message.error('日期与星期不可以同时为“不指定”')
      }
      if (this.dVal !== '?' && this.weekVal !== '?') {
        this.$message.error('日期与星期必须有一个为“不指定”')
      }
      let v = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal} ${this.yearVal}`
      if (v !== this.cronExpression ) {
        this.$emit('update:cronExpression', v)
      }
      return v
    }
  },
  methods: {
    updateVal () {
      if (!this.cronExpression) {
        return
      }
      this.cronZn = '';
      let arrays = this.cronExpression.split(' ');
      this.sVal = arrays[0];
      this.mVal = arrays[1];
      this.hVal = arrays[2];
      this.dVal = arrays[3];
      this.monthVal = arrays[4];
      this.weekVal = arrays[5];
      this.yearVal = arrays[6];
      // 将cron表达式解析成中文
      // 先判断年 ? * 2020 2020-2021 这4种情况
      if('*' !== this.yearVal&&'?' !== this.yearVal) {
          if(this.yearVal.includes('-')) {
            let array = this.yearVal.split('-');
            this.cronZn += `从${array[0]}至${array[1]}年`;
          }else {
            this.cronZn += `${this.yearVal}年`;
          }
      }else if('*' === this.yearVal) {
          this.cronZn += '每年';
      }
      // 在判断月 ? * 1或[1,2,3] 1-2 1/2 这5种情况
      if('*' !== this.monthVal&&'?' !== this.monthVal) {
        if(this.monthVal.includes('-')) {
          let array = this.monthVal.split('-');
          this.cronZn += `从${array[0]}至${array[1]}月`;
        } else if(this.monthVal.includes('/')){
          let array = this.monthVal.split('/');
          this.cronZn += `从${array[0]}月开始,每${array[1]}月`;
        } else {//1或[1,2,3]
          this.cronZn += `第${this.monthVal}月`;
        }
      }else if('*' === this.monthVal) {
        this.cronZn += '每月';
      }
      // 在判断周 ? * 1或[1,2,3] 1-2 1/2 2#6 2L 这7种情况
      if('*' !== this.weekVal&&'?' !== this.weekVal) {
        if(this.weekVal.includes('-')) {
          let array = this.weekVal.split('-');
          this.cronZn += `从星期${array[0]}至星期${array[1]}`;
        } else if(this.weekVal.includes('/')){
          let array = this.weekVal.split('/');
          this.cronZn += `从星期${array[0]}开始,每${array[1]}天`;
        } else if(this.weekVal.includes('#')) {
          let array = this.weekVal.split('#');
          this.cronZn += `从本月第${array[0]}周,星期${array[1]}`;
        } else if(this.weekVal.includes('L')) {
          let array = this.weekVal.split('L');
          this.cronZn += `从本月最后一个星期${array[0]}周`;
        } else{
          this.cronZn += `星期${this.weekVal}`;
        }
      }else if('*' === this.weekVal) {
        this.cronZn += '每周';
      }
      // 在判断日 ? * 1或[1,2,3] 1-2 1/2 2W L 这7种情况
      if('*' !== this.dVal&&'?' !== this.dVal) {
        if(this.dVal.includes('-')) {
          let array = this.dVal.split('-');
          this.cronZn += `从${array[0]}至${array[1]}号`;
        } else if(this.dVal.includes('/')){
          let array = this.dVal.split('/');
          this.cronZn += `从${array[0]}号开始,每${array[1]}日`;
        } else if(this.dVal.includes('W')) {
          let array = this.dVal.split('W');
          this.cronZn += `本月${array[0]}号,最近的工作日`;
        } else if(this.dVal.includes('L')) {
          this.cronZn += `从本月最后一天`;
        } else{
          this.cronZn += `第${this.dVal}号`;
        }
      }else if('*' === this.dVal) {
        this.cronZn += '每日';
      }
      // 在判断时 ? * 1或[1,2,3] 1-2 1/2 这5种情况
      if('*' !== this.hVal&&'?' !== this.hVal) {// 存在指定月份
        if(this.hVal.includes('-')) {
          let array = this.hVal.split('-');
          this.cronZn += `从${array[0]}至${array[1]}时`;
        } else if(this.hVal.includes('/')){
          let array = this.hVal.split('/');
          this.cronZn += `从${array[0]}时开始,每${array[1]}小时`;
        } else {//1或[1,2,3]
          this.cronZn += `第${this.hVal}时`;
        }
      }else if('*' === this.hVal) {
        this.cronZn += '每时';
      }
      // 在判断分 ? * 1或[1,2,3] 1-2 1/2 这5种情况
      if('*' !== this.mVal&&'?' !== this.mVal) {// 存在指定月份
        if(this.mVal.includes('-')) {
          let array = this.mVal.split('-');
          this.cronZn += `从${array[0]}至${array[1]}分`;
        } else if(this.mVal.includes('/')){
          let array = this.mVal.split('/');
          this.cronZn += `从${array[0]}分开始,每${array[1]}分`;
        } else {//1或[1,2,3]
          this.cronZn += `第${this.mVal}分`;
        }
      }else if('*' === this.mVal) {
        this.cronZn += '每分';
      }
      // 在判断秒 ? * 1或[1,2,3] 1-2 1/2 这5种情况
      if('*' !== this.sVal&&'?' !== this.sVal) {// 存在指定月份
        if(this.sVal.includes('-')) {
          let array = this.sVal.split('-');
          this.cronZn += `从${array[0]}至${array[1]}秒`;
        } else if(this.sVal.includes('/')){
          let array = this.sVal.split('/');
          this.cronZn += `从${array[0]}秒开始,每${array[1]}秒`;
        } else {//1或[1,2,3]
          this.cronZn += `第${this.sVal}秒`;
        }
      }else if('*' === this.sVal) {
        this.cronZn += '每秒';
      }
      this.cronZn+="运行";
      this.$emit('update:cronZn', this.cronZn)
    },
  },
  created () {
    this.updateVal()
  },
  components: {
    SecondAndMinute, hour, day, month, week, year
  }
}
</script>

<style lang="css">
.cron {
  text-align: left;
  padding: 10px;
  background: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}
</style>
